<template>
  <div class="biao-dan">
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>黑马面经后台管理系统</span>
    
  </div>
    <el-form ref="from" :rules="rules"  label-position="top" label-width="80px" :model="user">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password"></el-input>
        </el-form-item>
     <el-form-item class="btns">
            <el-button type="primary" @click="login">立即登录</el-button>
            <el-button @click="reset">重置</el-button>
  </el-form-item>
  </el-form>
</el-card>
  </div>
</template>

<script>
export default {
        data(){
            return{
                user:{
                    username:'',
                    password:'',

                },
                rules:{
                    username:[
                        {required:true,message:'请输入用户名',trigger:'blur' },
                    ],
                    password:[
                        {required:true,message:'请输入密码',trigger:'blur' },
                    ]
                }
            }
        },
        methods:{
            async login(){
                await this.$refs.from.validate()
                console.log('通过');
console.log(this.user);
                // 调用登录action
                this.$store.dispatch('user/login',this.user)
            },
            reset(){
                this.$refs.from.resetFields();
            }
        },


}

</script>

<style>
.biao-dan{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

}
.box-card{
    width: 33%;
}
.clearfix{
    text-align: center;
}
.el-card__header{
    background-color:  #727cf5;
    color: #fff;

}
.btns{
    text-align: center;
}
</style>
